<template>
    <view class="rePair_detail">
        <view class="nav" :style="{ background: showBg ? '#fff' : '' }">
            <global-nav-bar type="black" left-icon="back" color="#333" :title="navBarTitle" :fixed="false"
                backgroundColor="rgba(0, 0, 0, 0)"></global-nav-bar>
        </view>
        <view>
            <image class="bg"
                src="https://592800-erised-fresh.oss-cn-shenzhen.aliyuncs.com/upload/20221012/cdbdb2f4d67c21d9e1e8089234d17085.png"
                mode="" v-if="!showBg"></image>
        </view>
        <!-- 头部进度条 -->
        <view class="header">
            <elevtor-card
                :msg="{ ...elevatorDetail, elevatorId: this.elevatorId, isFull: this.isFull, isHistory: isFromHistory }">
            </elevtor-card>
        </view>
        <view class="content_box" :style="{ zIndex: showBg ? '100' : '105' }">
            <view class="dutyPerson">
                <view class="title">救援人员</view>
                <view class="content">
                    <view v-for="(item, index) in planContentUsers " :key="index" class="content-item">
                        <view class="content-item-box" @click="dial(item)">
                            <view :style="!item.signUser || item.signUser.isPlanStatus == false ? 'background:#b9b9b9' : item.userId == userinfo.user_id ? 'background:#0091ff' : 'background:#00C6C0'
            " class="useritem">
                                <text v-if="item.signUser">{{ item.signUser.userName.slice(-2) }}</text>
                                <text v-else>{{ item.userName.slice(-2) }}</text>
                            </view>
                            <image src="@/static/images/callPhone.png" mode="">
                            </image>
                            <view>联系{{ item.userName }}</view>
                        </view>
                    </view>
                </view>
            </view>
            <view class="progressBar">
                <view class="progressBar_content">
                    <map class="mapBox" v-if="markers.length" :latitude="markers[0].latitude"
							:longitude="markers[0].longitude" :scale="scale" :markers="markers"
                        @markertap="markertap">
                        <cover-view slot="callout">
                            <block v-for="(item, index) in customCalloutMarkers" :key="index">
                                <cover-view class="customCallout" :marker-id="item.userId">
                                    <cover-view class="content_left">
                                        <cover-image :src="item.avatar ? item.avatar : '/static/images/map/avatar.png'"></cover-image>
                                    </cover-view>
                                    <cover-view class="content_right">
                                        <cover-view class="content_right_main">
                                            <cover-view class="realName">{{ item.realName }}</cover-view>
                                            <cover-view>({{
            item.deptName.length > 5 ? item.deptName.slice(0, 5) + '...' :
                item.deptName
        }})</cover-view>
                                        </cover-view>
                                        <cover-view class="phone">{{ item.phone }}</cover-view>
                                        <cover-view class="position" v-if="!item.isArrived">距离救援项目:
                                            <cover-view class="way" >{{ item.distance > 1000 ?
            (item.distance
                /
                1000).toFixed(1) + '公里' : item.distance + '米' }}</cover-view>
                                        </cover-view>
                                        <cover-view class="arried" v-else>
                                            <cover-image src="/static/images/index/6.png"></cover-image>
                                            <cover-view>已到达</cover-view>
                                        </cover-view>
                                        <cover-view class="time">{{ item.createTime }}</cover-view>
                                    </cover-view>
                                </cover-view>
                            </block>
                        </cover-view>
                    </map>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
import ElevtorCard from './components/elevtor-card.vue';
import GlobalNavBar from '@/components/uni-nav-bar/global-nav-bar';
import { mapState } from 'vuex';
// 经纬度距离计算
import { getDistance, getScale } from '@/utils/tools.js'; 
import { elevtorDetail, rescueDetail, rescueDetailMap } from '@/apis/elevator.js';
export default {
	components: {
		GlobalNavBar,
		ElevtorCard,
	},
	computed: {
		...mapState('user', ['userinfo']),
	},
	data() {
		return {
			showBg: false,
			// 顶部导航栏title
			navBarTitle: '',  
			elevatorDetail: {},
			latitude: '',
			longitude: '',
			markers: [],
			customCalloutMarkers: [],
			planId: '',
			elevatorId: '',
			isFull: '',
			elevatorStatus: '',
			status: '',
			isFromHistory: '',
			planContentUsers: [],
			// 定时刷新map定位信息 10s
			interVar: null, 
			// 动态scale
			scale: 12, 
		};
	},
	async onLoad(e) {
		this.navBarTitle = '救援人员定位';
		console.log(e, 'e的值');
		this.planId = e.planId;
		if (e.elevatorId) {
			this.elevatorId = e.elevatorId;
		}
		if (e.type) {
			this.isFromHistory = e.type;
		}
		this.rescueDetailMap();
		this.interVar = setInterval(() => {
			this.rescueDetailMap();
		}, 10000);
		this.initData();
	},
	onHide() {
		clearInterval(this.interVar);
		this.interVar = null;
	},
	onUnload() {
		clearInterval(this.interVar);
		this.interVar = null;
	},
	onPageScroll(e) {
		// console.log(e.scrollTop, '滚动')
		if (e.scrollTop > 20) {
			this.navBarTitle = this.elevatorDetail.elevatorAddress;
			this.showBg = true;
		} else {
			this.navBarTitle = '救援详情';
			this.showBg = false;
		}
	},
	methods: {
		async initData() {
			uni.showLoading({
				title: '加载中',
				icon: 'none'
			});
			await this.getDetail();
			if (this.elevatorId != 0) {
				elevtorDetail({ elevatorId: this.elevatorId }).then(res => {
					if (res) {
						this.elevatorDetail = res.data;
						this.elevatorStatus = res.data.isStop;
						this.isFull = res.data.isFull;
						uni.hideLoading();
					}
				});
			}
			return;
		},
		// 获取map信息
		rescueDetailMap() {
			let latitude = '';
			let longitude = '';
			uni.getLocation({
				type: 'gcj02',
				success: function (res) {
					latitude = res.latitude;
					longitude = res.longitude;
				}
			});
			setTimeout(() => {
				rescueDetailMap({
					planId: this.planId
				}).then(res => {
					let count = 1;
					let platform = uni.getSystemInfoSync().platform;
					res.data.forEach(item => {
						item.width = 40;
						item.height = 46;
						item.iconPath = '/static/images/map/position.png';
						item.customCallout = {
							anchorY: 86,
							anchorX: 115,
							display: 'ALWAYS',
						};
						if (this.userinfo.user_id == item.userId && !item.isArrived) {
							item.latitude = latitude;
							item.longitude = longitude;
						}
						item.id = Number(item.userId);
						item.distance = Math.round(getDistance(item.latitude, item.longitude, this.elevatorDetail.latitude, this.elevatorDetail.longitude));
						if (item.isArrived) {
							if (count > 1) {
								item.width = 1;
								item.height = 1;
								if (count == 2) {
									item.customCallout.anchorY += 40;
								} else {
									item.customCallout.anchorY += count * 42;
								}
							}
							item.latitude = this.elevatorDetail.latitude - count * (platform == 'ios' ? 0.00004 : 0.000008);
							item.longitude = Number(this.elevatorDetail.longitude) + (platform == 'ios' ? 0.00003 : 0.00001);
							item.distance = 100;
							count += 1;
						}
					});
					if (res.data.some(item => item.latitude)) {
						let minMathData = Math.min.apply(Math, res.data.map(item => item.distance));
						this.scale = getScale(minMathData);
					}
					let list = res.data;
					let newMakers = [];
					for (let i = 0; i < list.length; i++) { 
						if (list[i].latitude) {
							let item = list[i];
							list[i].latitude = list[i].latitude * 1;
							list[i].longitude = list[i].longitude * 1;
							// #ifdef H5 
							list[i].label = {
								x: 8,
								y: -42,
								anchorX: 8,
								anchorY: -42,
								content: `<div style="line-height:16px;font-size:12px;color:#333;display: flex;background:#fff;border-radius: 2rpx;padding: 6px 8px;">
									<div style="padding-right:6px"><img style="border-radius: 50%;width: 32px;height: 32px;" src="${item.avatar ? item.avatar : '/static/images/map/avatar.png'}"></div>
									<div >
										<div style="display: flex;color: #333;">
											<div style="font-weight: bold;">${item.realName}</div>
											<div >(${item.deptName.length > 5 ? item.deptName.slice(0, 5) + '...' : item.deptName})</div>
										</div>
										<div style="color: #666;">${item.phone}</div>
										<div style="color:#E02020;display: ${!item.isArrived ? 'flex' : 'none'};">距离救援项目:<div style="font-weight: bold;">${item.distance > 1000 ? (item.distance / 1000).toFixed(1) + '公里' : item.distance + '米'}</div></div>
									    <div style="color:#FA6400;display: ${item.isArrived ? 'flex' : 'none'};align-items: center;">
										<img  style="width: 16px;height: 16px;" src="/static/images/index/6.png">已到达
									    </div>
										<div style="color: #999;">${item.createTime}</div>
									</div>
									</div>`
							};
							// #endif
							newMakers.push(list[i]);
						}
					}

					if (newMakers.length) {
						if (this.markers.length) {
							this.markers = [this.markers[0], ...newMakers];
						} else {
							this.markers = [...newMakers];
						}
					} 
					this.customCalloutMarkers = newMakers;
				});
			}, 1000);
		},
		// 获取救援详情
		getDetail() {
			uni.showLoading({
				title: '加载中',
				icon: 'none'
			});
			return new Promise(resolve => {
				rescueDetail({ planId: this.planId }).then(res => {
					if (res) {
						// map 救援目的地 经纬度
						const marker = { 
							id: 9999999,
							latitude: res.data.latitude * 1,
							longitude: res.data.longitude * 1,
							width: 32,
							height: 32,
							iconPath: '/static/images/map/sign.png'
						};
						if (this.markers.length) {
							this.markers[0] = marker;
						} else {
							this.markers = [marker];
						}
						// 经度
						this.elevatorDetail.longitude = res.data.longitude; 
						// 纬度
						this.elevatorDetail.latitude = res.data.latitude; 
						// 项目id
						this.elevatorDetail.buildingId = res.data.buildingId;  
						// 项目名称
						this.elevatorDetail.buildingName = res.data.buildingName;
						// 项目地址
						this.elevatorDetail.buildingAddress = res.data.buildingAddress; 
						// 梯名
						this.elevatorDetail.elevatorAddress = res.data.address; 

						this.planContentUsers = res.data.planContentUsers;
						this.status = res.data.status;
						if ((this.status == 4 && this.isSign) || this.status > 4) {
							clearInterval(this.setInterval);
						}
						this.elevatorId = res.data.elevatorId;
						uni.hideLoading();
					}
					resolve();
				});
			});
		},
		// 点击地图标签
		markertap(e) {
			// #ifdef H5 
			console.log(e);
			return;
			// #endif
			// let data = this.markers.filter(item => item.id == e.markerId);
			// if (data[0].isArrived) {
			// 	this.markers.forEach(item => {
			// 		if (item.isArrived) {
			// 			if (item.customCallout.display == 'ALWAYS') {
			// 				item.customCallout.display = 'NONE';
			// 			} else {
			// 				item.customCallout.display = 'ALWAYS';
			// 			}
			// 		}
			// 	});
			// } else {
			// 	this.markers.forEach(item => {
			// 		if (item.id == e.markerId && item.customCallout) {
			// 			if (item.customCallout.display == 'ALWAYS') {
			// 				item.customCallout.display = 'NONE';
			// 			} else {
			// 				item.customCallout.display = 'ALWAYS';
			// 			}
			// 		}
			// 	});
			// }
		},
		// 拨号
		dial(item) {
			uni.showModal({
				title: '拨打电话',
				content: item.phone,
				success: (res) => {
					if (res.confirm) {
						uni.makePhoneCall({
							phoneNumber: item.phone
						});
					}
				}
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.dutyPerson {
    background-color: #fff;
    margin-bottom: 20rpx;
    padding: 20rpx;
    padding-left: 28rpx;

    .title {
        align-items: center;
        font-size: 32rpx;
        color: #333;
        font-weight: bold;
    }

    .content {
        display: flex;
        flex-wrap: wrap;

        &-item {
            display: flex;
            align-items: center;
            width: 50%;
            margin-top: 20rpx;

            &-box {
                width: 100%;
                display: flex;
                align-items: center;
                color: #333333;
                font-size: 24rpx;
               view:nth-last-child(1){
                    color: #0091ff;
                }
            }

            image {
                width: 32rpx;
                height: 32rpx;
            }
        }

        .useritem {
            color: #fff;
            width: 54rpx;
            height: 54rpx;
            border-radius: 50%;
            text-align: center;
            font-size: 22rpx;
            line-height: 52rpx;
            margin-left: 12rpx;
            overflow: hidden;

            text {
                width: 78rpx;
                display: block;
                margin-left: -12rpx;
                overflow: hidden;
            }
        }
    }

    .shrink {
        display: flex;
        justify-content: center;
        align-items: center;
        color: #999999;
        font-size: 26rpx;
        margin-top: 30rpx;
    }

    .borderRight {
        border-right: 1px solid #d8d8d8;
    }
}

.mapBox {
    width: 100%;
    height: 1100rpx;
}

.customCallout {
    display: flex;
    width: 350rpx;
    box-sizing: border-box;
    background-color: #fff;
    box-shadow: 0px 2rpx 8rpx 0px rgba(0, 0, 0, 0.1);
    border-radius: 4rpx;
    padding: 12rpx 16rpx;

    .content_left {
        width: 64rpx;
        padding-right: 12rpx;
        cover-image{
border-radius: 50%;
width: 64rpx;height: 64rpx;
        }
    }

    .content_right {
        font-size: 24rpx;
        color: #333;
        .content_right_main {
      display: flex;
      color: #333;
      .realName {
        font-weight: bold;
      }
      .phone {
        color: #666;
      }
      .position {
        color: #e02020;
        display: flex;
      }
      .way {
        font-weight: bold;
      }
      .arried {
        color: #fa6400;
        display: flex;
        align-items: center;
        cover-image{
            width: 32rpx;
            height: 32rpx;
        }
      }

      .time {
        color: #999;
      }
    }

        cover-view {
            margin-bottom: 4rpx;
        }
    }
}

.rePair_detail {
    position: relative;

    .nav {
        position: sticky;
        top: 0;
        z-index: 112;
    }

    .bg {
        width: 750rpx;
        height: 354rpx;
        position: absolute;
        top: 0;
    }

    .header {
        // height: 160rpx;
        padding-left: 40rpx;
        padding-right: 32rpx;
        margin-bottom: 50rpx;
        padding-top: 28rpx;
        // margin-top: 20rpx;
        // background: linear-gradient(0deg, rgba(0, 145, 255, 0) 0%, rgba(0, 145, 255, 0.15) 100%);
    }

    .progressBar_elevator {

        width: 710rpx;
        margin: 0 auto;
        background: #fff;
        border-radius: 8rpx;
        margin-bottom: 20rpx;
        display: flex;
        height: 84rpx;
        line-height: 84rpx;
        z-index: 300;

        view:nth-of-type(1) {
            flex: 1;
            font-size: 32rpx;
            font-weight: 500;
            color: #333333;
            margin-left: 20rpx;
        }

        view:nth-of-type(2) {
            flex: 0 0 200rpx;
            text-align: right;
            font-size: 26rpx;
            color: #0091ff;
            border-radius: 8rpx;
            padding: 0rpx 30rpx;
            vertical-align: middle;

            text {
                margin-right: 8rpx;
            }

            image {
                width: 32rpx;
                height: 32rpx;
                vertical-align: middle;
            }

        }
    }

    .content_box {
        padding: 0 20rpx;
        background-color: #f3f6f8;
        padding-bottom: 150rpx;
        position: relative;

        // z-index: 100;
        .content_item {
            margin-bottom: 20rpx;
            padding: 28rpx 20rpx;
            border-radius: 8rpx;
            background: #ffffff;

            .title {
                font-size: 32rpx;
                color: #333;
                font-weight: bold;
                padding-bottom: 22rpx;
            }

            .des {
                margin-bottom: 20rpx;

                :nth-child(2) {
                    margin-bottom: 16rpx;
                    color: #333;
                    font-size: 28rpx;
                }
            }

            .faultImg {
                display: flex;
                flex-wrap: wrap;

                // margin: 20rpx 0;
                image {
                    width: 120rpx;
                    height: 120rpx;
                    margin-right: 18rpx;
                }
            }

            .falutItem {
                display: flex;
                align-items: center;
                margin-top: 10rpx;

                .label {
                    color: #999999;
                    font-size: 28rpx;
                    width: 160rpx;
                }

                .trapDesc {
                    flex: 1;
                }
            }
        }

        .faultReasonContent {
            padding: 0 20rpx;

            .faultReasonItem {
                display: flex;
                align-items: baseline;
                margin-bottom: 20rpx;

                .label {
                    width: 160rpx;
                    color: #999;
                }

                .falutLabel {
                    flex: 1;

                    view {
                        display: inline-block;
                        padding: 4rpx 24rpx;
                        font-size: 26rpx;
                        text-align: center;
                        border: 2rpx solid #E02020;
                        border-radius: 8rpx;
                        color: #E02020;
                        margin-top: 4rpx;
                        margin-right: 10rpx;
                    }
                }

                .falutDesc {
                    flex: 1;
                }
            }

            .imgList {
                display: flex;
                align-items: center;

                view {
                    margin-right: 24rpx;
                    margin-bottom: 24rpx;
                }
            }

            .msg {
                font-size: 24rpx;
                color: #999999;
                margin-top: 16rpx;

                view {
                    height: 34rpx;
                }
            }
        }

        .progressBar {
            display: flex;
            justify-content: center;
            margin-bottom: 20rpx;

            .progressBar_content {
                width: 710rpx;
                // height: 284rpx;
                background: #ffffff;
                border-radius: 8rpx;
                padding: 20rpx;
                box-sizing: border-box;
                height: 1000rpx;
                overflow: hidden;

            }
        }
    }

    .bottom {
        position: fixed;
        bottom: 0;
        left: 0;
        z-index: 200;
        background-color: #fff;
        height: 100rpx;
        width: 100%;
        display: flex;
        padding-right: 18rpx;
        box-sizing: border-box;

        view {
            // height: 100%;
            display: flex;
            align-items: center;
        }

        .left {
            width: 200rpx;
            font-size: 20rpx;

            .left_item {
                display: flex;
                flex-direction: column;
                flex: 1;

                view {
                    width: 100%;
                    display: flex;
                    flex: 1;
                    justify-content: center;
                    // background: red;
                    color: #666;
                }

                image {
                    width: 48rpx;
                    height: 48rpx;
                }
            }
        }

        .right {
            flex: 1;

            .start {
                width: 524rpx;
                height: 70rpx;
                background: #0091ff;
                border-radius: 8rpx;
                color: #fff;
            }

            .repariing {
                width: 100%;
                justify-content: space-between;

                view {
                    display: flex;
                    flex: 1;
                    justify-content: center;
                    height: 70rpx;
                    border-radius: 8rpx;
                }

                .add {
                    background: #0091ff;
                    margin-right: 14rpx;
                    color: #fff;
                    font-size: 26rpx;
                }

                .addRed {
                    position: relative;

                    text {
                        position: absolute;
                        top: -10rpx;
                        right: 0;
                        width: 30rpx;
                        height: 30rpx;
                        background: red;
                        border-radius: 15rpx;
                        font-size: 20rpx;
                        text-align: center;
                    }
                }

                .finish {
                    background: #efefef;
                    color: #cccccc;
                    font-size: 26rpx;
                }
            }
        }
    }

    .change_elevator {
        display: flex;
        flex-direction: row;
        justify-content: center;

        .actElevator {
            // background-color: #0091ff;
            font-size: 24rpx !important;
            color: #0091ff !important;
            border: 2rpx #0091ff solid !important;
        }

        view:nth-of-type(1) {
            // background-color: #0091ff;
            color: #666;
            height: 72rpx;
            width: 176rpx;
            line-height: 72rpx;
            text-align: center;
            border-radius: 8rpx;
            border: 2rpx #ccc solid;
            font-size: 24rpx;
            margin-right: 60rpx;
        }

        view:nth-of-type(2) {
            font-size: 24rpx;
            color: #666;
            height: 72rpx;
            width: 176rpx;
            line-height: 72rpx;
            text-align: center;
            border-radius: 8rpx;
            border: 2rpx #ccc solid;
        }

    }
}
</style>